﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Collection 的定义及 AJAX 交互</title>
    <link media="all"  type="text/css" rel="Stylesheet"  href="Styles/reset.css" />
    <link media="all"  type="text/css" rel="Stylesheet"  href="Styles/960.css" />    
    <link media="all"  type="text/css" rel="Stylesheet"  href="Styles/text.css" />
    <link media="all"  type="text/css" rel="Stylesheet"  href="Styles/layout.css" />
    <link media="all"  type="text/css" rel="Stylesheet"  href="Styles/nav.css" />

    <script type="text/javascript" src="Scripts/Libs/jquery-1.8.3.min.js"></script>
     <script type="text/javascript" src="Scripts/Libs/underscore.js"></script>
      <script type="text/javascript" src="Scripts/Libs/backbone.js"></script>
</head>
<body>
   <div class="container_16">
            <div class="grid_16">
				<h2 id="page-heading">Backbone.js Demo —— collection</h2>
			</div>
            <div class="clear"></div>
            <div class="grid_4 alpha">&nbsp;</div>
            <div class="grid_8">
            <div class="box">
					<h2>
						注册
					</h2>
					<div style="margin: 0px; position: static; overflow: hidden;"><div id="login-forms" class="block" style="margin: 0px;">
						

                            <fieldset>
								<legend>注册信息</legend>
                                <p></p>
								<p>
									<label>用户名： </label>
									<input type="text" value="" id="UserName" name="UserName">
								</p>
								<p>
									<label>登陆账号 : </label>
									<input type="text" value="" id="LoginID" name="LoginID">
								</p>
								<p>
									<label>密码： </label>
									<input type="text" value=""  id="PWD" name="PWD">
								</p>
								<p>
									<label>密码确认 : </label>
									<input type="text" value="" id="PWDC" name="PWDC">
								</p>
								<p>
									<label>公司： </label>
									<input type="text" value="" id="Company"   name="Company">
								</p>						
							<p>
									<label>Email 地址： </label>
									<input type="text" value="" id="Email" name="Email">
								</p>
								<input type="submit" class="register-button" id="btnRegister" value="注册">
							</fieldset>
						
					</div></div>
				</div>
            </div>
            <div class="grid_4"></div>
   </div>

      <div class="container_16">
    <div class="box">
            <h2>
						用户列表
					</h2>
            <div id="tables" class="block" style="margin: 0px;">
				
						<table summary="This table includes examples of as many table elements as possible">
							<caption></caption>
							<colgroup>
								<col class="colC">
								<col class="colB">
								<col class="colB">
                                <col class="colB">
                                <col class="colA">
							</colgroup>
							<thead>
								<tr>
									<th class="table-head" colspan="5">已注册用户</th>
								</tr>
								<tr>
									<th>ID</th>
									<th>用户名</th>
                                    <th>登陆ID</th>
                                    <th>公司</th>
									<th class="currency">Email</th>
								</tr>
							</thead>
							
							<tbody id="tb_userlist" >
								<tr class="odd">
									<th>Lorem ipsum</th>
									<td>Dolor sit</td>
                                    <td>Dolor sit</td>
                                    <td>Dolor sit</td>
									<td class="currency">$125.00</td>
								</tr>
								<tr>
									<th>Dolor sit</th>
									<td>Nostrud exerci</td>
                                    <td>Dolor sit</td>
                                    <td>Dolor sit</td>
									<td class="currency">$75.00</td>
								</tr>
								<tr class="odd">
									<th>Nostrud exerci</th>
									<td>Lorem ipsum</td>
                                    <td>Lorem ipsum</td>
                                    <td>Lorem ipsum</td>
									<td class="currency">$200.00</td>
								</tr>
								<tr>
									<th>Lorem ipsum</th>
									<td>Dolor sit</td>
                                    <td>Lorem ipsum</td>
                                    <td>Lorem ipsum</td>
									<td class="currency">$64.00</td>
								</tr>
								<tr class="odd">
									<th>Dolor sit</th>
									<td>Nostrud exerci</td>
                                    <td>Lorem ipsum</td>
                                    <td>Lorem ipsum</td>
									<td class="currency">$36.00</td>
								</tr>
							</tbody>
						</table>
					</div>
    </div>
   
   </div>

   <script type="text/javascript">
       $(document).ready(function () {

           /// 该Demo 演示 Backbone 中的 Model 和 Collection 定义和 Ajax 交互           
           /// 开发：余庆元  
           /// 定义一个用户实体
           var user = Backbone.Model.extend({
               url: 'Ajax/Ajax_register.ashx',  //用户提交服务器，采用传统 ashx 一般程序处理文件作交换
               initialize: function () { //构造函数，初始化
                   this.bind("invalid", function (model, error) {
                       alert(error);
                       return false;
                   });
               },
               defaults: { //实体属性定义
                   ID: '',
                   UserName: '',
                   LoginID: '',
                   PWD: '',
                   Company: '',
                   Email: ''
               },
               //规则校验
               validate: function (attributes) {
                   if (attributes.UserName == '') {
                       return "用户名不能为空！";
                   };

                   if (attributes.LoginID == '') {
                       return "登录账号不能为空！"
                   };

                   if (attributes.PWD == '') {
                       return "密码不能为空！"
                   }
               },
               //自定义方法
               register: function () {
                   this.save(); //保存实体 save 为backbone自带方法。
               }

           });

           //定义 user collection 

           var userlist = Backbone.Collection.extend({
               model: user,
               url: 'Ajax/Ajax_userlist.ashx', //服务器响应地址
               initialize: function () { //构造函数，初始化

               },
               // 为集合定义方法 获取服务器数据。
               getAll: function () {
                   // fetch 从服务器获取数据，服务器返回 JSON 对象，Backbone 自动绑定 Model集合 
                   this.fetch({ success: function (collection, response) {
                       //alert(collection);
                       var strTr = "";
                       var i=0;
                       collection.each(function (user) {
                           //user.set("LoginID", user.get("LoginID") + user.get("ID"));
                           if(i%2==0)
                           {
                             strTr += "<tr class=\"odd\"> ";
                           }else
                           {
                                 strTr += "<tr > ";
                           }

                           strTr +="<th>" + user.get("ID") + "</th> " +
									"<td>" + user.get("UserName") + "</td> " +
                                    "<td>" + user.get("LoginID") + "</td> " +
                                    "<td>" + user.get("Company") + "</td> " +
									"<td class=\"currency\">" + user.get("Email") + "</td> " +
								    "</tr>";
                            i++;

                       });
                       $("#tb_userlist").empty();
                       $("#tb_userlist").append(strTr);

                   },
                       error: function () {
                           alert("error");
                       }
                   });
               }

           });

           var newList = new userlist;        //创建一个新集合对象
           newList.getAll();  // 获取数据
           //           showList = function () {
           //               newList.each(function (user) {
           //                   alert(user.get("LoginID"));
           //               });
           //           };
           //           newList.on('reset', showList);

           //===============================
           //jquery 事件触发
           $("#btnRegister").click(function () {
               var regUser = new user;
               regUser.set("UserName", $("#UserName").val());
               regUser.set("LoginID", $("#LoginID").val());
               regUser.set("PWD", $("#PWD").val());
               regUser.set("Company", $("#Company").val());
               regUser.set("Email", $("#Email").val());

               if ($("#PWD").val() != $("#PWDC").val()) {
                   alert("密码确认不一致！");
                   return false;
               } else {
                   regUser.save();
               };
           });

       });

   </script>

</body>
</html>
